import {ref, onMounted, onUnmounted, unref} from 'vue';
import { throttle } from "lodash";

/**
 * 简化版拖拽 Hook：仅实现拖拽 + 限制在父元素内
 * @param {Ref} targetRef - 要拖拽的子元素 ref
 * @param {Ref} parentRef - 限制范围的父元素 ref
 * @param {Boolean} is_included  - 是否限制在父元素内
 */
export function useDraggable(targetRef, parentRef, is_included) {
  // 拖拽状态与位置
  let isDragging = false;
  const position = ref({ x: 0, y: 0 }); // 子元素相对于父元素的位置

  // 记录初始位置（鼠标按下时的坐标 + 元素当前位置）
  let startMouseX = 0;
  let startMouseY = 0;
  let startPosX = 0;
  let startPosY = 0;

  // 1. 鼠标按下：开始拖拽
  const handleMouseDown = (e) => {
      e.stopPropagation();
    // 只允许左键触发（避免右键菜单干扰）
    if (e.button !== 0) return;

    isDragging = true;
    // 记录鼠标初始坐标（相对于浏览器窗口）
    startMouseX = e.clientX;
    startMouseY = e.clientY;
    // 记录元素当前位置
    startPosX = position.value.x;
    startPosY = position.value.y;

    // 绑定全局移动/结束事件（避免鼠标移出元素后失效）
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  // 2. 鼠标移动：更新元素位置 + 限制范围
  const handleMouseMove = throttle((e) => {
    if (!isDragging) return;

    // 计算鼠标移动距离
    const moveX = e.clientX - startMouseX;
    const moveY = e.clientY - startMouseY;

    // 计算新位置（初始位置 + 移动距离）
    let newX = startPosX + moveX;
    let newY = startPosY + moveY;

    // 限制新位置在父元素内（核心逻辑）
    const parentEl = unref(parentRef);
    const targetEl = unref(targetRef);

    if (parentEl && targetEl) {
      const parentRect = parentEl.getBoundingClientRect();
      const targetRect = targetEl.getBoundingClientRect();

      if (is_included) {
        // 父元素内可移动的最大范围 = 父元素尺寸 - 子元素尺寸
        const maxX = parentRect.width - targetRect.width;
        const maxY = parentRect.height - targetRect.height;
        // console.log(maxX, maxY);

        // 确保位置不超出 0 到 max 的范围
        newX = Math.max(0, Math.min(newX, maxX));
        newY = Math.max(0, Math.min(newY, maxY));
      }
    }

    // 更新最终位置
    position.value = { x: newX, y: newY };

  }, 8)

  // 3. 鼠标松开：结束拖拽
  const handleMouseUp = () => {
    isDragging = false;
    // 移除全局事件（避免内存泄漏）
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };

  // 组件挂载时：给子元素绑定「按下」事件
  onMounted(() => {
    const targetEl = targetRef.value;
    if (targetEl) {
      targetEl.addEventListener('mousedown', handleMouseDown);
    }
  });

  // 组件卸载时：清理所有事件
  onUnmounted(() => {
    const targetEl = targetRef.value;
    if (targetEl) {
      targetEl.removeEventListener('mousedown', handleMouseDown);
    }
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  });

  // 对外暴露：位置（用于绑定样式）和拖拽状态（可选）
  return {
    position, // { x: number, y: number }
    isDragging: ref(() => isDragging) // 实时拖拽状态
  };
}